<% if @success && @image_title %>
  <h1>Success!</h1>
  <img src=<%= @image_title.url.inspect %> alt=<%= @image_title.text.inspect %>/>
  <pre class="wrap">
    <%= @image_title.convert_command %>
  </pre>
<% elsif @success === false %>
  <h1>Failed.</h1>
<% else %>
  <%= MagickTitle.say("Hello!", :h1).to_html %>
  <%= MagickTitle.say("Welcome to MagickTitle!", :h2).to_html %>
<% end %>


<h2>Generate an image title!</h2>

<form action="/" method="get">
  <p>
    <label for="text">Text:</label><br/>
    <textarea name="text" id="name" rows="5" cols="50"><%= params[:text] %></textarea>
  </p>

  <div class="option">
    <p>
      <label for="options_font">Font:</label>
      <select name="options[font]" id="options_font">
        <% Dir.entries(MagickTitle.options.font_path).select{|f| f.match(".ttf") }.each do |font| %>
          <option value="<%= font %>"<%= ' selected="selected"' if @options[:font] == font %>><%= font.gsub(/\.[a-z]{3}/, '') %></option>
        <% end %>
      </select>
    </p>
    <% Dir.entries(MagickTitle.options.font_path).select{|f| f.match(".ttf") }.each do |font| %>
      <%= MagickTitle.say(font, :refresh => true, :font => font, :font_size => 20, :color => "#111").to_html(:parent => { :tag => "p" }) %>
    <% end %>
  </div>

  <div class="option">
    <p>Width: <em><span id="value_width"><%= @options[:width] %></span> pixels</em></p>
    <div id="slider_width"></div>
    <input type="hidden" name="options[width]" id="options_width" value="<%= @options[:width] %>" />
  </div>

  <div class="option">
    <p>Height: <em><span id="value_height"><%= @options[:height].to_i %> pixels</span></em></p>

    <p>
      <input type="checkbox" id="auto_height" name="auto_height"<%= ' checked="checked"' if @options[:height].to_i == 0 %>/>
      <label for="auto_height">Trim to minimum height</label>
    </p>

    <div id="slider_height"></div>
    <input type="hidden" name="options[height]" id="options_height" value="<%= @options[:height].to_i %>" />

  </div>

  <div class="option">
    <p>Font Size: <em><span id="value_font_size"><%= @options[:font_size] %></span> pixels</em></p>
    <div id="slider_font_size"></div>
    <input type="hidden" name="options[font_size]" id="options_font_size" value="<%= @options[:font_size] %>" />
  </div>

  <div class="option">
    <p>Kerning: <em><span id="value_kerning"><%= @options[:kerning] %></span></em></p>
    <div id="slider_kerning"></div>
    <input type="hidden" name="options[kerning]" id="options_kerning" value="<%= @options[:kerning] %>" />
  </div>

  <div class="option">
    <p>Line Height: <em><span id="value_line_height"><%= @options[:line_height] %></span></em></p>
    <div id="slider_line_height"></div>
    <input type="hidden" name="options[line_height]" id="options_line_height" value="<%= @options[:line_height] %>" />
  </div>



  <div class="option">
    <p>Color: <input type="text" name="options[color]" id="options_color" value="<%= @options[:color] %>" /></p>

    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>

    <div id="swatch" class="ui-widget-content ui-corner-all"></div>


    <br class="clear"/>

  </div>







	<p>
    <button type="submit">
      <%= MagickTitle.say("Magick Title Go!", :button).to_html %>
    </button>
  </p>
</form>

<script type="text/javascript">
//<![CDATA[



  function rgbToHex(r, g, b) {
		var hex = [
			r.toString( 16 ),
			g.toString( 16 ),
			b.toString( 16 )
		];
		$.each( hex, function( nr, val ) {
			if ( val.length === 1 ) {
				hex[ nr ] = "0" + val;
			}
		});
		return hex.join("").toUpperCase();
  }

  function hexToRgb(hex) {
    hex = hex.replace(/^#?/, '');
    if (hex.length == 3) hex = hex + hex;
    var r = parseInt(hex.substring(0,2), 16),
        g = parseInt(hex.substring(2,4), 16),
        b = parseInt(hex.substring(4,6), 16);
    return [r, g, b];
  }


	function refreshSwatch() {
		var red = $("#red").slider("value"),
			green = $("#green").slider("value"),
			 blue = $("#blue").slider("value"),
			  hex = "#" + rgbToHex(red, green, blue);
		$("#swatch").css("background-color", hex);
		return hex;
	}


  $( "#red, #green, #blue" ).slider({
    orientation: "horizontal",
    range: "min",
    max: 255,
    slide: function() {
      $("#options_color").val(refreshSwatch());
    },
    change: refreshSwatch
  });

	var rgb = hexToRgb($("#options_color").val());
  $("#red").slider("value", rgb[0]);
  $("#green").slider("value", rgb[1]);
  $("#blue").slider("value", rgb[2]);

	$("#options_color").change(function(evt) {
    var hex = this.value.split("").pop();
    console.log(hex);
    if (hex && !hex.match(/[#A-Fa-f0-9]/)) {
      console.log('INVALID KEY');
    }
  }).keyup(function() {
    val = $(this).val();
    // match either 3 or 6 digit hexdecimals
    if (val.match(/^#?(([A-Fa-f0-9]{3})|(([A-Fa-f0-9]{2}){3}))$/)) {
      var rgb = hexToRgb(val);
      $("#red").slider("value",   rgb[0]);
      $("#green").slider("value", rgb[1]);
      $("#blue").slider("value",  rgb[2]);
    }
  });








	$("#slider_width").slider({
	  value: <%= @options[:width] %>,
    min: 100,
		max: 800,
		slide: function( event, ui ) {
		  $("#value_width").text(ui.value);
		  $("#options_width").val(ui.value);
		}
	});

  $("#auto_height").change(function(evt) {

    $("#slider_height").toggle(!this.checked);

    if (this.checked) {
      $("#value_height").text("auto");
  	 	$("#options_height").val("");
    } else {
      var val = $("#slider_height").slider('value');
		  $("#value_height").text(val);
  	 	$("#options_height").val(val);
    }

  }).change();

	$("#slider_height").slider({
	  value: <%= 0 == @options[:height].to_i ? 20 : @options[:height] %>,
    min: 20,
		max: 100,
		slide: function( event, ui ) {
		  $("#value_height").text(ui.value + ' pixels');
		  $("#options_height").val(ui.value);
		}
	});

	$("#slider_font_size").slider({
	  value: <%= @options[:font_size] %>,
    min: 10,
		max: 100,
		slide: function( event, ui ) {
		  $("#value_font_size").text(ui.value);
		  $("#options_font_size").val(ui.value);
		}
	});

	$("#slider_kerning").slider({
	  value: <%= @options[:kerning] %>,
    min: -50,
		max: 50,
		slide: function( event, ui ) {
		  $("#value_kerning").text(ui.value);
		  $("#options_kerning").val(ui.value);
		}
	});

	$("#slider_line_height").slider({
	  value: <%= @options[:line_height].to_i %>,
    min: -100,
		max: 100,
		slide: function( event, ui ) {
		  $("#value_line_height").text(ui.value);
		  $("#options_line_height").val(ui.value);
		}
	});

//]]>
</script>
